﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="Edge" />
    <link href="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet">

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

    <style type="text/css">
        body {
            background-color: #DADADA;
        }

            body > .grid {
                height: 100%;
            }

        .image {
            margin-top: -100px;
        }

        .column {
            max-width: 450px;
        }
    </style>

    <script>

        var _debug = true;
        var _validateInput = null;

        function isEmail(str) {
            var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
            return reg.test(str);
        }

        $(function() { 
        
            // 写入IP数据
            var storage = window.sessionStorage;
            storage.ip = returnCitySN["cip"];
            // 验证功能
            _validateInput = $('.ui.form')
                .form({
                    inline: true,
                    on: 'change',
                    fields: {
                        name: {
                            identifier: 'name',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请输入用户名'
                                },
                                {
                                    type: 'minLength[2]',
                                    prompt: '用户名至少应有2位'
                                }
                            ]
                        },
                        pass: {
                            identifier: 'pass',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请输入密码'
                                },
                                {
                                    type: 'minLength[4]',
                                    prompt: '密码至少应有4位'
                                }
                            ]
                        },
                        terms: {
                            identifier: 'terms',
                            rules: [
                                {
                                    type: 'checked',
                                    prompt: '您必须同意选择项'
                                }
                            ]
                        }
                    },
                    onValid: function () {
                        _valid = true;
                    },
                    onFailure: function () {
                        _valid = false;
                    }
                });

            // 绑定按钮
            $("#btn-login").click(function () {
                $('.ui.form').form('validate form');
                var valid = $('.ui.form').form('is valid');
                if (valid === false) return;

                var name = $('#tb-name').val();
                var pass = $('#tb-pass').val();

                $.ajax({
                    type: "POST",
                    contentType: "application/json;charset=utf-8",
                    url: "/Pages/DbService.asmx/LoginUser",
                    dataType: 'json',
                    data: "{'name':'" + name + "','pass':'" + pass + "','ip':'" + storage.ip + "'}",
                    async: false,
                    //timeout: 3000,
                    cache: false,
                    error: function (x, e) {
                        if (_debug) console.log(e);
                    },
                    success: function (result) {
                        if (_debug) console.log("登录回执：" + result.d);

                        if (result.d !== "Success") {
                            $('.ui.basic.modal').modal('show');
                            return;
                        }

                        storage.userName = name;
                        location.href = "/Pages/index.html";
                    }
                });
            });
            $("#btn-register").click(function () {
                $('.ui.form').form('validate form');
                var valid = $('.ui.form').form('is valid');
                if (valid === false) return;

                var name = $('#tb-name').val();
                var pass = $('#tb-pass').val();
                var email = $('#tb-email').val();

                if (email == null|| isEmail(email) === false) {
                    email = '';
                }

                $.ajax({
                    type: "POST",
                    contentType: "application/json;charset=utf-8",
                    url: "/Pages/DbService.asmx/RegUser",
                    dataType: 'json',
                    data: "{'name':'" + name + "','pass':'" + pass + "','ip':'" + storage.ip + "',email':'" + email + "'}",
                    async: false,
                    //timeout: 3000,
                    cache: false,
                    error: function (x, e) {
                        if (_debug) console.log(e);
                    },
                    success: function (result) {
                        if (_debug) console.log("注册回执：" + result.d);

                        if (result.d !== "Success") {
                            $('.ui.basic.modal').modal('show');
                            return;
                        }

                        storage.userName = name;
                        location.href = "/Pages/index.html";
                    }
                });
            });
        });

    </script>

</head>
<body>

    <div class="ui middle aligned center aligned grid">
        <div class="column">
            <h2 class="ui teal image header">
                <img src="/Images/walnut.png" class="image">
                <div class="content">进入系统</div>
            </h2>
            <div class="ui large form">
                <div class="ui stacked segment">
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input id="tb-name" type="text" name="name" placeholder="用户名">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="lock icon"></i>
                            <input id="tb-pass" type="password" name="pass" placeholder="密码">
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input id="tb-email" type="text" name="email" placeholder="邮箱">
                        </div>
                    </div>
                    <div class="inline field">
                        <div class="ui slider checkbox">
                            <input type="checkbox" name="terms">
                            <label>陈钊是大帅哥</label>
                        </div>
                    </div>
                    <div class="ui fluid large teal buttons">
                        <button id="btn-register" class="ui button">注册</button>
                        <div class="or" data-text="or"></div>
                        <button id="btn-login" class="ui button">登录</button>
                    </div>
                </div>

                <div class="ui error message"></div>

            </div>
        </div>
    </div>

    <!--提示窗体-->
    <div class="ui basic modal">
        <div class="ui icon header">
            <i class="archive icon"></i>
            系统提示
        </div>
        <div class="content">
            <p>进入系统失败！</p>
        </div>
        <div class="actions">
            <div class="ui green ok inverted button">
                <i class="checkmark icon"></i>
                是
            </div>
        </div>
    </div>

</body>
</html>
